<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-col :span="4">
        <div style="margin-top: 50px"></div>
        <el-form :model="capitalData" label-width="120px">
          <el-form-item label="总资产">
            {{ capitalData.总资产 }}
          </el-form-item>
          <el-form-item label="总市值">
            {{ capitalData.总市值 }}
          </el-form-item>
          <el-form-item label="账户盈亏">
            {{ capitalData.账户盈亏 }}
          </el-form-item>
          <el-form-item label="盈亏比率">
            {{ capitalData.盈亏比率 }}
          </el-form-item>
          <el-form-item label="当前仓位">
            {{ capitalData.当前仓位 }}
          </el-form-item>
          <el-form-item label="可用资金">
            {{ capitalData.可用资金 }}
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="18">
        <h5>持仓股票</h5>
        <el-table :data="positionData" style="width: 100%" max-height="300px">
          <el-table-column prop="stockCode" label="股票代码" width="150"/>
          <el-table-column prop="stockName" label="股票名称" width="150"/>
          <el-table-column prop="instantPrice" label="最新价格" width="150"/>
          <el-table-column prop="cost" label="成本价格" width="150"/>
          <el-table-column prop="number" label="持仓数量" width="150"/>
          <el-table-column prop="instantTotalPrice" label="最新市值" width="150"/>
          <el-table-column prop="profit" label="浮动盈亏" width="150"/>
          <el-table-column fixed="right" label="" width="120">
            <template #default="scope">
              <el-button type="text" size="small" @click="buyPosition(scope.row)">买入</el-button>
              <el-button type="text" size="small" @click="sellPosition(scope.row)">卖出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
  <div id="myChart" :style="{width: '400px', height: '250px'}"></div>
</template>

<script lang="js" src="./Asset.js"></script>

<style scoped>

</style>
